<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件示例</title>
</head>
<body>
<div id="app" v-cloak="v-cloak">
    <cpn></cpn>
</div>
<div id="app2" v-cloak="v-cloak">
    <cpn></cpn>
    <ch></ch>
</div>
<div id="app3" v-cloak="v-cloak">
    <!-- Vue 实例对应的模板无法直接使用子组件 -->
    <!-- 组件在Vue实例使用之前已被编译好 -->
    <!-- <cn1></cn1>-->
    <ch></ch>
</div>
</body>
<!-- 自定义模板 -->
<script id="mytag1" type="text/x-template">
    <div>
        <h6>我是script自定义的标题</h6>
        <p>我是内容,hhh</p>
        <p>我是内容,去去去</p>
    </div>
</script>
<template id="mytag2">
    <div>
        <h6>我是template自定义的标题</h6>
        <p>我是内容,hhh</p>
        <p>{{message}}</p>
    </div>
</template>
<script src="../../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 1. 创建组件构造器对象
    const cpnConstructor = Vue.extend({
        template: `<div> <!-- // 会渲染成 render函数 -->
        <h2>我是标题</h2>
        <p>我是内容,hhh</p>
        <p>我是内容,呵呵</p>
        </div>`
    });
    // 2. 注册组件 Vue.component('cpn', cpnConstructor);  全局组件. 意味着可以在多个 Vue 实例下使用 全局组件注册语法糖
    Vue.component('cpn', {
        // template: `<div> <h2>我是标题</h2> <p>我是内容,hhh</p> <p>我是内容,呵呵</p> </div>` template: '#mytag1'
        template: '#mytag2',
        data() { // Vue实例的数据无法被渲染, 组件渲染的数据在 data 中被定义, 之所以使用函数是方式多个组件公共使用一个实例
            return {message: "圈圈圈"};
        }
    });

    const app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: { // 局部组件, 只能在当前 Vue 实例下使用
            // key 为使用组件的标签名, value 是组件构造器
            cpn: cpnConstructor
        }
    });
    const app2 = new Vue({
        el: '#app2',
        data: {},
        components: {
            ch: {
                template: `
                <div>
                    <h2>局部组件语法糖</h2>
                    <p>我是内容,hhh</p>
                    <p>我是内容,呵呵</p>
                </div>
                `
            }
        }
    });

    // 1. 创建第一个组件构造器
    const cpnC1 = Vue.extend({
        template: `
          <div>
            <h2>标题</h2>
            <p>内容1</p>
          </div>
        `
    });
    // 2. 创建第二个组件构造器
    const cpnC2 = Vue.extend({
        template: `
            <div>
                <cn1></cn1>
                <h3>标题</h3>
                <p>内容2</p>
            </div>
        `,
        components: { // 指定子组件
            cn1: cpnC1
        }
    });

    // root 组件
    const app3 = new Vue({
        el: '#app3',
        render: h => h(cpnC2)
    });
</script>
</html>
